<template>
	<view>
		<img src="/static/love_bg3.jpg" style="position:absolute;right:0;width:100%;height:100%;" />
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in TabList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}({{item.count}})
				</view>
			</view>
			<!-- 我的邀请 -->
			<view class="cu-list menu-avatar" v-if="TabCur == 0">
				<view class="cu-item" v-for="(item,index) in invite_list" :key="index">
					<!-- <view class="cu-avatar radius lg" :style="'background-image:url('+ item.profile.photos[0] +');'"></view> -->
					<!-- #ifdef H5 -->
					<view class="cu-avatar radius lg" v-lazy:background-image="{src:item.profile.avatar}" @tap="previewImage(index, 0)"></view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image class="cu-avatar radius lg" :lazy-load="true" :src="item.profile.avatar" @tap="previewImage(index, 0)"></image>
					<!-- #endif -->
					<view class="content" @tap="toDetail(item.profile.account_id)">
						<view class="text-grey">
							<view class="text-cut padding-right">{{item.profile.nick_name}}</view>
							<view class="cu-tag round bg-olive lg" style="letter-spacing: 1px;">{{calculateAge(item.profile.birthday)}}岁</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-locationfill text-olive margin-right-xs"></text> {{item.profile.region[0]}} {{item.profile.region[1]}} {{item.profile.region[2]}}
							</view> 
						</view>
					</view>
					<view class="action">
						<view class="cu-tag round bg-green sm" v-if="item.status == 1"></view>
						<view class="cu-tag round bg-grey sm" v-if="item.status == 0"></view>
						<view class="cu-tag round bg-green sm" v-if="item.status == 2"></view>
					</view>
				</view>
			</view>
			<!-- 他人的邀请 -->
			<view class="cu-list menu-avatar" v-if="TabCur == 1">
				<view class="cu-item" v-for="(item,index) in other_invite_list" :key="index">
					<!-- <view class="cu-avatar radius lg" :style="'background-image:url('+ item.profile.photos[0] +');'"></view> -->
					<!-- #ifdef H5 -->
					<view class="cu-avatar radius lg" v-lazy:background-image="{src:item.profile.avatar}" @tap="previewImage(index, 1)"></view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image class="cu-avatar radius lg" :lazy-load="true" :src="item.profile.avatar" @tap="previewImage(index, 1)"></image>
					<!-- #endif -->
					<view class="content" @tap="toDetail(item.profile.account_id)">
						<view class="text-grey">
							<view class="text-cut padding-right">{{item.profile.nick_name}}</view>
							<view class="cu-tag round bg-olive lg" style="letter-spacing: 1px;">{{calculateAge(item.profile.birthday)}}岁</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-locationfill text-olive margin-right-xs"></text> {{item.profile.region[0]}} {{item.profile.region[1]}} {{item.profile.region[2]}}
							</view> 
						</view>
					</view>
					<view class="action">
						<view class="cu-tag round bg-green sm" v-if="item.status == 1"></view>
						<view class="cu-tag round bg-grey sm" v-if="item.status == 0"></view>
						<view class="cu-tag round bg-green sm" v-if="item.status == 2"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { objectInviteList, objectOtherInviteList } from '../../api/object';
	export default {
		data() {
			return {
				TabCur: 0,
				TabList: [
					{
						title: '我的邀请',
						count: 0,
					},
					{
						title: '收到邀请',
						count: 0,
					}
				],
				scrollLeft: 0,
				invite_list: [],
				other_invite_list: [],
			};
		},
		onLoad() {
			objectInviteList().then(res => {
				if (res != undefined) {
					this.invite_list = res.list
					this.TabList[0].count = this.invite_list.length
				}
			}).catch(err => {
				console.log(err)
			});
			
			objectOtherInviteList().then(res => {
				if (res != undefined) {
					this.other_invite_list = res.list
					this.TabList[1].count = this.other_invite_list.length
				}
			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			previewImage(index, type) {
				if (type == 0) {
					uni.previewImage({
						indicator: "none",
						loop: false,
						urls: [this.invite_list[index].profile.avatar],
						longPressActions: {},
						sizeType: ['original']
					})
				} else if (type == 1) {
					uni.previewImage({
						indicator: "none",
						loop: false,
						urls: [this.other_invite_list[index].profile.avatar],
						longPressActions: {},
						sizeType: ['original']
					})
				}
				
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			toDetail(id) {
				uni.navigateTo({
				    url: '/pages/love/detail?id=' + id // 跳转到对应路径的页面
				});
			},
			calculateAge(birthDateStr) {
				var birthDate = new Date(birthDateStr)
				var currentDate = new Date();
				var birthYear = birthDate.getFullYear();
				var birthMonth = birthDate.getMonth();
				var birthDayOfMonth = birthDate.getDate();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth();
				var currentDayOfMonth = currentDate.getDate();
				 
				var age = currentYear - birthYear;
				if (currentMonth < birthMonth || (currentMonth == birthMonth && currentDayOfMonth < birthDayOfMonth)) {
				    age--;
				}
				return age;
			}
		}
	}
</script>

<style>

</style>
